<template>
    <div id="home" class="content">
        <highcharts class="circular" ref="circularOptions" :options="circularOptions"></highcharts>
        <highcharts class="cloumnar" ref="cloumnarOptions" :options="cloumnarOptions"></highcharts>
        <!-- 登录弹出框 -->
        <el-dialog style=" overflow: hidden !important;" top='15vh' :modal-append-to-body="flag" title="登录"
            :visible.sync="dialogFormVisible" :close-on-click-modal='false' :close-on-press-escape='false' :show-close='false'>
            <el-form>
                <el-form-item>
                    <el-input v-model='userinfo.username' placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type='password' v-model='userinfo.password' placeholder="密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doLogin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // 引入封装好的highChats接口
    import highChats from '../module/highChats';
    import Storage from '../module/Storage.js';
    import Api from '../module/domain_name.js';
    import Md5 from '../module/Md5';
    export default {
        name: 'home',

        data() {
            return {
                circularOptions: highChats.circular,
                cloumnarOptions: highChats.cloumnar,
                dialogFormVisible: true,
                flag: false,
                // 用来保存用户输入框的内容
                userinfo: {}
            }
        },
        methods: {
            // 获取到报表的数据，渲染圆形图比例
            getAreaSeries() {
                //   获取到用户ID  在本地存储localStorage
                const userinfo = Storage.get('userinfo');
                // 签名的实现
                var sign = Md5.sign({
                    'a': 'areaOptions', //改成对应的参数值
                    'uid': userinfo.id,
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                // 根据接口来传递参数的，文档要求uid和sign要传递过去
                const api = Api.getAreaApi;
                // 执行提交数据  axios
                this.$http.get(api, {
                        params: {
                            uid: userinfo.id,
                            sign: sign,
                        }
                    })
                    .then((response) => {
                        const AreaData = response.data.result;
                        // 将数据格式替换成highchats对应的格式
                        let Arr = AreaData.map((item) => {
                            return {
                                name: item.name,
                                // 接口中获取的是字符串，因此要转换为Number类型
                                y: parseInt(item.count)
                            }
                        })
                        // 获取到highchats的DOM节点
                        var circularOptionschart = this.$refs.circularOptions.chart;
                        circularOptionschart.addSeries({
                            name: '舆情分布图',
                            colorByPoint: true,
                            data: Arr //将获取的数据转为对应的格式进行渲染
                        })

                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            },
            // 获取柱状图数据
            getColumnSeries() {
                //   获取到用户ID  在本地存储localStorage
                const userinfo = Storage.get('userinfo');
                // 签名的实现
                var sign = Md5.sign({
                    'a': 'columnOptions', //改成对应的参数值
                    'uid': userinfo.id,
                    'salt': userinfo.salt //私钥  不要传入到URL中
                })
                // 根据接口来传递参数的，文档要求uid和sign要传递过去
                const api = Api.getColumnApi;
                // 执行提交数据  axios
                this.$http.get(api, {
                        params: {
                            uid: userinfo.id,
                            sign: sign,
                        }
                    })
                    .then((response) => {
                        var cloumnarOptionschart = this.$refs.cloumnarOptions.chart;
                        // 柱状图 一次只能添加一个
                        for (let i = 0; i < response.data.result.length; i++) {
                            cloumnarOptionschart.addSeries({
                                name:response.data.result[i].name,
                                data:response.data.result[i].data
                            })
                        }
                    })
                    .catch((error) => {
                        this.$message({
                            message: error,
                            type: 'warning'
                        });
                    });
            },
            // localStorage要进行封装操作，以及域名请求需要进行封装 
            doLogin() {
                if (this.userinfo.username && this.userinfo.password) {
                    //  通过接口获取用户名和密码
                    // const api = 'http://www.apiying.com/yuqing/index.php?m=Api&a=login';
                    // 请求api接口实现登录  vue-resource  axios 在vue-electron中默认集成了axios
                    // 实际地址  http://www.apiying.com/yuqing/index.php?m=Api&a=login
                    // this.$http就是axios
                    this.$http.post(Api.loginApi, {
                            username: this.userinfo.username,
                            password: this.userinfo.password
                        }).then((response) => {
                            console.log(response);
                            let data = response.data;
                            // 我们需要做一个验证失败操作
                            if (data.success) {
                                // 如果成功，我们使用本地存储LocalStorage  
                                // 在这里有一个问题就是LocalStorage无法保存数组，只能保存json数据
                                Storage.set('userinfo', data.result);
                                this.dialogFormVisible = false;
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: data.message
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    this.$notify({
                        title: '警告',
                        message: '输入框不能为空',
                        type: 'warning'
                    });
                }

            }
        },
        // 刚加载页面的时候
        beforeMount() {
            //    判断用户有没有登录，通过localStorage来判断
            // 使用本地存储来判断是否存在用户了，来判断是否已经登录了
            var userinfo = Storage.get('userinfo');
            if (userinfo) {
                this.dialogFormVisible = false;
            } else {
                this.dialogFormVisible = true;
            }
        },
        mounted() {
            this.getAreaSeries();
            this.getColumnSeries();
        },
    }
</script>

<style lang='scss' scope>
    .cloumnar {
        padding-bottom: 10px;
    }
</style>